<template lang="">
    <div>
 <div class="common-layout">
    <el-container>
      <el-header>
         <div class="qwe">djggdawd</div>
        <div class="header">xxxx大型后台管理系统</div>
        <div class="span">
          <span>欢迎VVVVIP金主===>{{store.getters.getUser.username}}</span>
          <el-button type="danger" @click="logout">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <v-nav></v-nav>
        </el-aside>
        <el-main>
                <!-- 二级路由出口 -->
             <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
    </div>
</template>

<script lang="ts" setup>
import vNav from '@/components/Nav.vue'
import { useRouter } from "vue-router";
import { useStore } from 'vuex';
const store = useStore()
const router = useRouter();
const logout = () => {
   store.dispatch("changeUserAction", false)
   router.push('/login')
}
</script>
<style scoped>
.el-header {
   text-align: center;
   background-color: #b6c9fa;
}

.el-menu {
   min-height: 600px;
}

.el-header {
   display: flex;
   justify-content: space-between;
   align-content: center;
  
}
.qwe{
      visibility: hidden;
   }

.header {
   padding-top: 20px;
   color: white;
}


.span {
   /* float: right; */
   padding-top: 10px;
}

</style>